<template>
    <div class="cinema-detail-filter-container">
        <div class="date-tab">
            <nut-tabs :title-gutter="15" v-model="tabTimesIndex" title-scroll>
                <nut-tab-pane v-for="(item, index) in tabTimesList" :pane-key="index" :title="`${item.t} ${item.a}`">
                </nut-tab-pane>
            </nut-tabs>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from 'vue';
import moment from "moment";
const tabTimesIndex = ref(0)
const tabTimesList: any = ref([])
const props = defineProps({
    //子组件接收父组件传递过来的值
    data: Object,
});
//使用父组件传递过来的值
const { data: timesList } = toRefs(props);
onMounted(() => {
    getTimes()
});
const emit = defineEmits(['onChanged'])
watch(tabTimesIndex, (index) => {
    emit('onChanged', tabTimesList.value[index])
})
watch(tabTimesList, () => {
    emit('onChanged', tabTimesList.value[0])
})
const getTimes = () => {
    const times = timesList?.value
    const arr: any = []
    times?.forEach(item => {
        const time = item
        let t = getweek(moment(time).startOf('day').format('E'))
        if (time === moment().format('YYYY-MM-DD')) {
            t = '今天'
        } else if (time === moment().subtract(-1, 'days').format('YYYY-MM-DD')) {
            t = '明天'
        } else if (time === moment().subtract(-2, 'days').format('YYYY-MM-DD')) {
            t = '后天'
        }
        arr.push({
            time: time,
            t: t,
            a: time.substr(5, 9)
        })
    });
    tabTimesList.value = arr

}
const getweek = (val) => {
    const week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    return week[val - 1];
};
</script>
<style lang="scss">
.cinema-detail-filter-container {
    display: flex;
    flex-direction: column;

    .nut-tabs {
        .nut-tabs__titles {
            background: #ffffff !important;

            .nut-tabs__titles-item {
                .nut-tabs__titles-item__smile {
                    display: none;
                }

                .nut-tabs__titles-item__text {
                    color: #858a99;
                    font-size: 22px !important;

                }
            }

            .nut-tabs__titles-item__line {
                background: linear-gradient(to right, #5232B7, #7237BC, #5232B7) !important;
                border-radius: 30px !important;
            }

            .nut-tabs__titles-item.active {
                .nut-tabs__titles-item__smile {
                    display: block;
                    margin-top: 10px;
                }

                .nut-tabs__titles-item__text {
                    color: #15181d;
                }
            }
        }

        .nut-tabs__content {
            display: none !important;
        }
    }
}
</style>